import React from 'react'
import './featuredInfo.css'
import {ArrowDownward,ArrowUpward} from '@material-ui/icons'

export default function FeaturedInfo() {
    return (
        <div className='featured'>
            <div className="featureItem">
                <span className="featuredTitle">Revanue</span>
                <div className="featureMoneyContainer">
                    <span className="featuredMoney">$2,415</span>
                    <span className="featureMoneyRate">-11.4 <ArrowDownward className="featuredIcon negative" /></span>
                </div>
                <span className="featuredSub">Compared to last month</span>
            </div>
            <div className="featureItem">
                <span className="featuredTitle">Sales</span>
                <div className="featureMoneyContainer">
                    <span className="featuredMoney">$4,415</span>
                    <span className="featureMoneyRate">-1.4 <ArrowDownward className='featuredIcon' /></span>
                </div>
                <span className="featuredSub">Compared to last month</span>
            </div>
            <div className="featureItem">
                <span className="featuredTitle">Cost</span>
                <div className="featureMoneyContainer">
                    <span className="featuredMoney">$2,225</span>
                    <span className="featureMoneyRate">-11.4 <ArrowUpward className='featuredIcon' /></span>
                </div>
                <span className="featuredSub">Compared to last month</span>
            </div>
        </div>
    )
}
